<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>多点筛查</title>

<%@ include file="../common.jsp"%>
<script type="text/javascript" src="${path }/static/vender/bootstrap/bootstrap-paginator.min.js"></script>
<script type="text/javascript" src="${path }/static/vender/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="${path }/static/js/mustache.min.js"></script>
<script type="text/javascript" src="${path }/static/js/phoneCompanyData.js"></script>
</head>

<body>
	<jsp:include page="${pagePath }/header.jsp">
		<jsp:param value="1" name="active" />
	</jsp:include>

	<div class="container-fluid">
		<div class="row">
			<div class="col-sm-3 col-md-2 sidebar">
				<jsp:include page="left_navbar.jsp">
					<jsp:param value="3" name="active" />
				</jsp:include>
			</div>

			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
				<h3 class="page-header">多点筛查</h3>
				<div class="row">
					<div class="col-md-7">
						<h4 style="margin-bottom:30px;">检索条件
							<button type="button" class="btn btn-info pull-right" onclick="addFilter();" style="margin-left: 5px;">&nbsp;+&nbsp;</button>
							&emsp;&emsp;
							<button type="button" class="btn btn-info pull-right" onclick="initPage();getInfoList();">&nbsp;检索&nbsp;</button>
						</h4>
						<div style="padding: 6px 12px;">
							<form id="filters">
							</form>
						</div>
					</div>
					<div class="col-md-5">
						<h4 style="margin-bottom: -1px;">检索结果</h4>
						<div class="table-responsive"  style="max-height:600px;overflow:auto;">
							<table class="table table-striped">
								<thead>
									<tr>
										<th>#</th>
										<th>设备MAC</th>
										<th>厂商</th>
									</tr>
								</thead>
								<tbody id="listInfo">
									<tr>
										<td>请检索</td>
										<td>请检索</td>
										<td>请检索</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
				
			</div>
		</div>
	</div>

	<!-- Modal -->
	<div class="modal fade" id="modal-track">
		<div class="modal-dialog" style="width: 60%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title">详细信息列表</h4>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-md-12">
							<div class="table-responsive" style="max-height:600px;overflow:auto;">
								<table class="table table-striped">
									<thead>
										<tr>
											<th>#</th>
											<th>设备MAC</th>
											<th>采集点</th>
											<th>出现时间</th>
											<th>离开时间</th>
											<th>停留时间</th>
										</tr>
									</thead>
									<tbody id="trackListInfo">
			
									</tbody>
								</table>
							</div>
							<div style="background-color: #f5f5f5;" class="text-center">
								<ul id="pageChoose"></ul>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
				</div>
			</div>
		</div>
	</div>

	<jsp:include page="${pagePath }/footer.jsp"></jsp:include>

	<script type="text/javascript">
		$(document).ready(function() {
			addFilter("none");
			addFilter("none");
		});
		
		function initPage(){
			$('#curPage').val("");
		}
	
		function getInfoList(){
			var filterData = $('form#filters').serializeArray();
			var list = [];
        	var serializeObj={};
	        for (var item in filterData) {
	        	serializeObj[filterData[item].name] = filterData[item].value;
	        	if(filterData[item].name == "endTime"){
	        		list.push(serializeObj);
	        		serializeObj={};
	        	}
        	}
			//console.log(JSON.stringify(list));
		    $.ajax({
		        type: "post",
		        url: "${path }/data/multiQueryList",
		        data: {
					filterData : JSON.stringify(list)
		        },
		        success: function(data) {
					$("#listInfo").empty();
					if (data.listInfo.length > 0) {
						var listInfo = [];
						for(var i=0; i<data.listInfo.length; i++) {
							var obj = {"index":i+1 , "mac" : data.listInfo[i].mac , "phoneCompany" : phoneCompanyData[data.listInfo[i].mac.substring(0,8)]};
							listInfo.push(obj);
						}
						var list = new Object();
						list.listData = listInfo;
						var template = $('#tpl4table').html();
						Mustache.parse(template); 
						var htmlStr= Mustache.render(template, list);
						$("#listInfo").append(htmlStr);
						
					} else {
						$("#listInfo").append("<tr><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td></tr>");
					}
				},
				error : function(error) {
					alert("错误代码：" + error.status + "。" + "错误内容:"+ error.statusText + "。");
				}
			});
		}
		var deviceName;
		//初始化下拉菜单
		function initDevices(){
			
		    $.ajax({
		        type: "post",
		        url: "${path }/dev/getAllDevices",
		        success: function(data) {
					$(".devices").empty();
					if (data.devices.length > 0) {
						deviceName = "{";
						//解析数组
	                    $.each(data.devices,function(i, item) {
	                        //alert(item.ADD_FULL_DESC);
	                        $(".devices").append("<option value=" + item.devNo + "  >" + item.devName + "</option>");
	                        deviceName += '"'+ item.devNo +'" : "'+ item.devName + '" , ';
	                    });
	                    deviceName = JSON.parse(deviceName.substring(0,deviceName.length-2) +"}");
					} else {
						$(".devices").append("<option value= '' >加载失败</option>");
						deviceName = JSON.parse("{}");
					}
				},
				error : function(error) {
					alert("错误代码：" + error.status + "。" + "错误内容:"+ error.statusText + "。");
				}
			});
		}
		
		//获取手机品牌
		function getPhoneCompany(){
			
		    $.ajax({
		        type: "post",
		        url: "${path }/data/getPhoneCompany",
		        success: function(data) {
		        	var arrayArea = "{";
					//解析数组
                    $.each(data.listInfo,function(i, item) {
                    	arrayArea += ',"'+item.code +'" : "'+ item.brand+'"';
                    });
                    arrayArea += "}";
		        	console.log(arrayArea);
				},
				error : function(error) {
					alert("错误代码：" + error.status + "。" + "错误内容:"+ error.statusText + "。");
				}
			});
		}
		
		function addFilter(type){
			var template = $('#tpl4filter').html();
			Mustache.parse(template); 
			var tactic = {
					id: new Date().getTime(),
					show:type
				};
			$("#filters").append(Mustache.render(template, tactic));
			initDevices();
		}
		
		function deleteFilter(id){
			$("#"+id).remove();
		}
		
		//查询mac详细信息列表
		function getMacTrackList(mac){
			var filterData = $('form#filters').serializeArray();
			var list = [];
			var serializeObj={};
	        for (var item in filterData) {
	        	serializeObj[filterData[item].name] = filterData[item].value;
	        	if(filterData[item].name == "endTime"){
	        		list.push(serializeObj);
	        		serializeObj={};
	        	}
        	}
			
		    $.ajax({
		        type: "post",
		        url: "${path }/data/macInfoList",
		        data: {
		        	mac : mac,
		        	filterData : JSON.stringify(list)
		        },
		        success: function(data) {
					$("#trackListInfo").empty();
					
					if (data.listInfo.length > 0) {
						var listInfo = [];
						for(var i=0; i<data.listInfo.length; i++) {
							var standingTime = getTime(data.listInfo[i].goTime,data.listInfo[i].inTime);
							console.log(data.listInfo[i].deviceNo);
							var obj = {"index":i+1 , "mac" : data.listInfo[i].mac , "deviceName" : deviceName[data.listInfo[i].deviceNo] , "inTime" : dateForm(data.listInfo[i].inTime) , "goTime" : dateForm(data.listInfo[i].goTime) , "standingTime" : standingTime};
							listInfo.push(obj);
						}
						var list = new Object();
						list.macList = listInfo;
						var template = $('#tpl4trackTable').html();
						Mustache.parse(template); 
						var htmlStr= Mustache.render(template, list);
						$("#trackListInfo").append(htmlStr);
					
					} else {
						$("#trackListInfo").append(
							"<tr><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td></tr>");
					}
				},
				error : function(error) {
					alert("错误代码：" + error.status + "。" + "错误内容:"+ error.statusText + "。");
				}
			});
		}
		
		//显示mac详细信息列表
		function showMacTrackList(mac){
			$('#modal-track').modal('show', {backdrop: 'static'});
			getMacTrackList(mac);
		}
		
	</script>
	
	<script id="tpl4filter" type="x-tmpl-mustache">
		<div class="row" id="{{id}}">
			<div class="col-md-12 alert alert-info">
				<button style="display:{{show}}" type="button" class="close" aria-label="Close" onclick="deleteFilter({{id}});">
				  <span aria-hidden="true">&times;</span>
				</button>
				<label class="form-inline">采集点: 
					<select class="form-control devices" name="devices">
						<option value="">选择采集点</option>
					</select>
				</label>
				&nbsp;&nbsp;
				<label class="form-inline">时间: 
					<input name="startTime" style="width: 160px;" type="text" class="form-control" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" readonly />
				</label> 
				--
				<label class="form-inline">
					<input name="endTime" style="width: 160px;" type="text" class="form-control" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" readonly />
				</label>
			</div>
		</div>
	</script>
	
	<script id="tpl4table" type="x-tmpl-mustache">
		{{#listData}}
		<tr>
			<td>{{index}}</td>
			<td style="width: 160px;"><a href="JavaScript:void(0)" onclick="showMacTrackList('{{mac}}');">{{mac}}</a></td>
			<td>{{phoneCompany}}</td>
		</tr>
		{{/listData}}
	</script>
	
	<script id="tpl4trackTable" type="x-tmpl-mustache">
		{{#macList}}
		<tr>
			<td>{{index}}</td>
			<td style="width: 160px;">{{mac}}</td>
			<td>{{deviceName}}</td>
			<td>{{inTime}}</td>
			<td>{{goTime}}</td>
			<td>{{standingTime}}</td>
		</tr>
		{{/macList}}
	</script>
	
</body>
</html>